<template>
	<view>
		<navBar title="评价服务" backJudge></navBar>
		<view class="shopBox">
			<view class="form">
				<view class="name">{{re.serveTitle}}</view>
				<view class="subName">{{re.varietiesTitle}}</view>
			</view>
			<view class="rate">
				<uni-rate v-model="star"></uni-rate>
			</view>
		</view>
		<view style="width: 690rpx;display: flex;align-items: center;flex-wrap: wrap;margin: 0 auto;">
			<view :style="{backgroundColor:item.ischoose?'#4E8CFF':'#eee',color:item.ischoose?'#fff':'#333'}" style="margin-top: 20rpx;margin-right: 20rpx;font-size: 24rpx; padding: 10rpx 20rpx;border-radius: 4rpx;" @click="choosebiaoqian" :data-index="index" :data-item="item.name" v-for="(item,index) in biaoqianlist" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="title" style="margin-top: 30rpx;">为本次服务做出评价<span class="serverName">{{re.serverName}}</span></view>
		<view class="inputBox">
			<input v-model="inputValue" placeholder="输入你的评价" type="textarea" :inputBorder="false"></input>
		</view>
		<view class="tips">写满十五字有机会上主页推荐<span class="dot">优先展示</span></view>
		<view class="imgBox">
			<view @click="addImg" class="imgUp">
				<uni-icons size="25" type="camera-filled"></uni-icons>
			</view>
			<image class="img" mode="aspectFill" v-for="(item,index) in imgList" :key="index" :src="item"></image>
		</view>
		<view class="buttonBox" @click="enter">评价</view>
	</view>
</template>

<script>
	import {orderDetail,reviewsOrder,upImg} from '@/utils/API.js'
	import navBar from '../../components/navbars/navbars.vue'
	export default {
		data() {
			return {
				id: '',
				detail: {},
				re: {},
				imgList: [],
				inputValue:'',
				star:0,
				details:{},
				serverId:'',
				serverName:'',
				orderid:"",
				biaoqianlist:[
					{
					  name:'技术专业',
						ischoose:false
				  },
					{
					  name:'礼貌热情',
						ischoose:false
					},
					{
					  name:'快速完工',
						ischoose:false
					},
					{
					  name:'认真负责',
						ischoose:false
					},
					{
					  name:'按时上门',
						ischoose:false
					}],
				labellist:'',
				labellistarr:[]
			}
		},
		components:{
			navBar
		},
		onLoad(e) {
			this.id = e.id
			// this.id = 168
			this.serverId = e.serverId
			this.serverName = e.serverName
			this.orderid = e.orderid
			this.getDetail()
		},
		methods: {
			choosebiaoqian(e){
				var arr = []
				var item = e.currentTarget.dataset.item
				var index = e.currentTarget.dataset.index
				this.biaoqianlist[index].ischoose = !this.biaoqianlist[index].ischoose
				for(var i =0;i<this.biaoqianlist.length;i++){
					if(this.biaoqianlist[i].ischoose){
						arr.push(this.biaoqianlist[i].name) 	
					}
				}
				this.labellist = arr.toString()
				console.log(this.labellist);
			},
			async getDetail() {
				var data = {
					orderId: this.id
				}
				const res = await orderDetail(data)
				if(res.code==200){
					this.detail = res.data
					this.re = this.detail.request
				}
			
			},
			async enter() {
				var data = {
					"itemId": this.id,
					"serverId": this.serverId,
					"serverName": this.serverName,
					"userId": this.re.userId,
					"userPhone": this.re.userAddress.phone,
					"userAddress": this.re.userAddress.city.mergerName,
					"content": this.inputValue,
					"image": JSON.stringify(this.imgList),
					"label": 	this.labellist,
					"star": this.star,
					"orderNo":this.orderid
				}
				const res= await reviewsOrder(data)
				if(res.code==200){
					uni.showToast({
						title:'评价成功',
						icon:'none',
						duration:1000
					})
					const pages = getCurrentPages()
					const currentPage = pages[pages.length - 2]
					console.log(currentPage);
					currentPage.$vm.changepingja()
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
					
				}
				
			},
			async upImg(data){
				const res= await upImg(data)
				if(res.code==200){
					this.imgList.push(res.data.url)
				}
			},
			addImg() {
				var that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						var data = {
							file: res.tempFilePaths[0]
						}
						that.upImg(data)
					}
				})
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.buttonBox {
		position: fixed;
		bottom: 0;
		margin: 20px;
		background-color: $blue;
		color: white;
		width: calc(100% - 40px);
		text-align: center;
		padding: 10px 0px;
		border-radius: 5px;
	}

	.imgBox {
		margin: 20px;
		display: flex;
		flex-wrap: wrap;

		.imgUp {
			background-color: $backGrey;
			width: calc((100vw - 80px) / 4);
			height: calc((100vw - 80px) / 4);
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
			margin: 5px;
		}

		.img {
			width: calc((100vw - 80px) / 4);
			height: calc((100vw - 80px) / 4);
			margin: 5px;
		}
	}

	.tips {
		margin: 20px;
		color: $grey;
		font-size: 14px;

		.dot {
			color: $red;
		}
	}

	.inputBox {
		margin: 20px;
	}

	.title {
		padding: 0px 20px;
		display: flex;
		justify-content: space-between;

		.serverName {
			font-weight: bold;
			margin-left: 10px;
		}
	}

	.shopBox {
		padding: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.name {
			font-weight: bold;
		}

		.subName {
			color: $grey;
			font-size: 14px;
		}
	}
</style>